<!--
 * @Author: boyyang
 * @Date: 2022-01-14 16:52:45
 * @LastEditTime: 2022-01-14 17:49:47
 * @LastEditors: boyyang
 * @Description: 日期选择器
 * @FilePath: \boyyang\src\components\timePicker\index.vue
-->

<template>
    <div class="time-picker-wrapper">
        <input
            type="datetime-local"
            @change="timePickerChange"
            class="date-time-input"
            :value="moment(new Date(props.time * 1000)).format('YYYY-MM-DDTHH:mm:ss')"
        />
    </div>
</template>

<script lang="ts" setup>
import moment from 'moment'

interface ITimePickerProps {
    time?: number;
}

interface ITimePickerEmits {
    (e: 'timeChange', stamp: number): void;
    (e: 'update:time', stamp: number): void;
}

const emits = defineEmits<ITimePickerEmits>()

const props = withDefaults(defineProps<ITimePickerProps>(), {
    time: 1642155558
})


const timePickerChange = (e: any) => {
    let time = new Date(e.target.value)
    let stamp = Math.floor(time.getTime() / 1000)
    emits('update:time', stamp)
    emits('timeChange', stamp)
}
</script>

<style scoped lang="scss">
.time-picker-wrapper {
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ff4777;
    border-radius: 5px;
}
.date-time-input {
    outline: none;
    border: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color: #ff4777;
}
</style>